<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>设置</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="http://at.alicdn.com/t/font_956742_if4u2ec187h.css">
    <style media="screen">
    body{
      background: #f6f6f6;
    }
    header {
        min-height: 2.25rem;
        line-height: 2.25rem;
        background-color:#FEE407;
        font-size: 0.9rem;
        color: #4A4A4A;
        /*border-bottom: 1px solid #eee;*/
    }
    header .left_btn{
      width: 2.25rem;
    }

    header .right_btn{
      width: 2.25rem;
    }
    .main {
      margin-top: 0.5rem;
      background: #fff;
    }

    .hj_list {
        border-bottom: 1px solid #F6F6F6;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }

    .main_content {
        width: 0;
        overflow: hidden;
        padding-left: 0.5rem;
    }

    .main_content .title {
        font-size: 0.7rem;
        color: #333;
    }

    .hj_modal{
      display: none;
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
      z-index: 99;
      background: rgba(5,5,5,0.5);
    }

    .hj_modal_dialog{
      width: 14rem;
      height: 10rem;
      border-radius: 0.75rem;
      background: #fff;
    }
    .hj_modal_dialog_header{
      height: 2rem;
      border-bottom: 1px solid #F6F6F6;
    }
    .hj_modal_dialog_header .title{
      font-size: 0.9rem;
      color: #000000;
      font-weight: bold;
    }
    .hj_modal_dialog_header .left_btn, .right_btn{
      width: 2rem;
    }
    .hj_modal_dialog_header .right_btn .img_box{
      width: 0.7rem;
      margin: 0 auto;
    }
    .hj_modal_dialog_content{
      font-size: 0.7rem;
    }

    .hj_modal_dialog_footer{
      margin-bottom: 1rem;
    }

    .hj_modal_dialog_footer .left_btn,.hj_modal_dialog_footer .right_btn{
      background: #F6F6F6;
      border-radius: 0.5rem;
      font-size: 0.7rem;
      font-weight: bold;
      color: #333;
      text-align: center;
      padding: 0.5rem 1.25rem;
    }
    .hj_modal_dialog_footer .right_btn{
      background: #FEE407;
    }
    </style>
</head>
<body>

  <div id="hj_modal" class="hj_modal flex_column flex_center">
    <div class="hj_modal_dialog flex_column">
      <div class="hj_modal_dialog_header flex flex_center">
        <div class="left_btn"></div>
        <div class="flex_1 title hj_text_center">清 除 缓 存</div>
        <div onclick="_cancel('hj_modal')" class="right_btn">
          <div class="img_box">
            <img src="../images/close.png" alt="">
          </div>
        </div>
      </div>
      <div class="flex_1 hj_modal_dialog_content flex flex_center">
        <div class="flex_column flex_center">
          <div>是否清除老妖精消防APP缓存</div>
          <div>（不包含缓存视频）</div>
        </div>
      </div>
      <div class="hj_modal_dialog_footer">
        <div class="flex flex_center">
          <div class="flex_1 flex flex_center">
            <div onclick="_cancel('hj_modal')" class="left_btn">取消</div>
          </div>
          <div class="flex_1 flex flex_center">
            <div class="right_btn">确定</div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <div id="hj_login" class="hj_modal flex_column flex_center">
    <div class="hj_modal_dialog flex_column">
      <div class="hj_modal_dialog_header flex flex_center">
        <div class="left_btn"></div>
        <div class="flex_1 title hj_text_center">退 出 登 录</div>
        <div onclick="_cancel('hj_login')" class="right_btn">
          <div class="img_box">
            <img src="../images/close.png" alt="">
          </div>
        </div>
      </div>
      <div class="flex_1 hj_modal_dialog_content flex flex_center">
        <div class="flex_column flex_center">
          <div>退出后不会删除历史任何数据</div>
          <div>下次登录依然可以使用本账号</div>
        </div>
      </div>
      <div class="hj_modal_dialog_footer">
        <div class="flex flex_center">
          <div class="flex_1 flex flex_center">
            <div onclick="loginOut()" class="left_btn">退出登陆</div>
          </div>
          <div class="flex_1 flex flex_center">
            <div onclick="_cancel('hj_login')"  class="right_btn">取消</div>
          </div>

        </div>
      </div>
    </div>
  </div>

  <header class="flex flex_center">
      <div onclick="closeWin()" class="left_btn img_box">
        <i class="iconfont icon-left"></i>
      </div>
      <div class="flex_1 title hj_text_center">设置</div>
      <div class="right_btn"></div>
  </header>
  <main>
    <div class="main">
        <div class="wrap hj_margin_5">

          <div class="wrap hj_margin_t_5">
            <div onclick="openModal()" class="hj_list">
              <div class="flex flex_column_center">
                <div class="main_content flex_1 flex_column flex_around">
                  <div class="title">清除缓存</div>
                </div>
                <div class="right">
                  <i class="iconfont icon-right"></i>
                </div>
              </div>
            </div>

            <div onclick="openModalExit()" class="hj_list">
              <div class="flex flex_column_center">
                <div class="main_content flex_1 flex_column flex_around">
                  <div class="title">退出登录</div>
                </div>
                <div class="right">
                  <i class="iconfont icon-right"></i>
                </div>
              </div>
            </div>
        </div>
  </main>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/util.js"></script>
<script type="text/javascript">
apiready = function() {
    var header = $api.dom('header'); // 获取 header 标签元素
    // 1.修复开启沉浸式效果带来的顶部Header与手机状态栏重合的问题，最新api.js方法已支持适配iPhoneX；
    // 2.默认已开启了沉浸式效果 config.xml中 <preference name="statusBarAppearance" value="true"/>
    // 3.沉浸式效果适配支持iOS7+，Android4.4+以上版本
    headerH = $api.fixStatusBar(header);
    // 最新api.js为了适配iPhoneX增加的方法，修复底部Footer部分与iPhoneX的底部虚拟横条键重叠的问题；
  }

  function openModal()
  {
      $api.attr($api.byId("hj_modal"),"style","display:flex")
  }

  function _cancel(id)
  {
      $api.attr($api.byId(id),"style","display:none")
  }

  function openModalExit()
  {
      $api.attr($api.byId("hj_login"),"style","display:flex")
  }
</script>
